import { App, Layout, theme } from 'antd'
import UserSider from './component/UserSider'
import UserContent from './component/UserContent'
import { getTokenExpTime, isExp } from '../../util/token'
import { useNavigate } from 'react-router-dom'
import { useEffect, useState } from 'react'

const {Content, Sider } = Layout

const User = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken()

    const { message } = App.useApp()
    const navigate = useNavigate()
    const [isLogin, setLogin] = useState(false)
    useEffect(() => {
        const token = localStorage.getItem('token')
        console.log(token)
        if (token) {
            const expTime = getTokenExpTime(token)
            if (expTime) {
                if (isExp(expTime)) {
                    navigate('/login')
                    message.warning('登录过期，请重新登录')
                } else {
                    setLogin(true)
                }
            } else {
                message.warning('登录信息错误，请重新登录')
                navigate('/login')
            }
        } else {
            message.warning('未登录')
            navigate('/login')
        }
    }, [message, navigate])
    return (
        <>
            {isLogin ? 
            <Layout style={{ padding: '24px 0', background: colorBgContainer }}>
                <Sider style={{ background: colorBgContainer }} width={200}>
                    <UserSider />
                </Sider>
                <Content className='content' style={{ padding: '0 24px', minHeight: '72vh' }}>
                    <UserContent />
                </Content>
            </Layout>
            :<></>    
        }
        </>
    )
}

export default User